<template>
  <div>
    <van-cell :title="detailItem.sTitle" v-if="detailItem.lCanOutput != '0'" class="detailInput" @click="handleClick">
      <template #value>
        <!-- 图片 -->
        <span v-if="detailItem.sUIType === 'picture'">
          <van-image v-for="(item, index) in detailItem.valuelist" :key="index" width="70" height="70" fit="cover"
            :src="item.url" style="margin-left: 7px;" @click="showPopupPic(item)"/>
        </span>
        <!-- 附件 -->
        <span v-else-if="detailItem.sUIType === 'file'">
          <div v-for="(item, index) in detailItem.valuelist" :key="index">
            <a :href="item.url" target="_blank" style="color:#409EFF">{{ item.file.name }}</a>
          </div>
        </span>
        <!-- 评价 -->
        <span
          v-else-if="detailItem.sUIType === 'string' && detailItem.sUITypeExp === 'normal' && detailItem.sFormat === 'star'">
          <van-rate readonly v-model="detailItem.value" :size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
        </span>

        <!-- 抽取 -->
        <span v-else-if="detailItem.sUIType === 'extract'">
          <span v-html="detailItem.value"></span>
          <van-icon name="arrow" style="margin-left: 10px;" />
        </span>
        <!-- 默认 -->
        <span v-else v-html="detailItem.value"></span>
      </template>
    </van-cell>
    <van-popup v-model:show="showPic" closeable round :style="{ padding: '10px' }" >
                <van-image  width="300" height="" fit="cover"
            :src="popupPic.url"/>
  
</van-popup>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { ref  } from "vue";

const router = useRouter()

import { useRouterStore } from "@/stores/router";
const routerStore = useRouterStore();

import { useCheck } from "@/hooks/hooks.js";
const { checkCustomized } = useCheck();
// const value = "3"
const showPic = ref(false);
const popupPic = ref({});

const props = defineProps({
  detailItem: {
    type: Object,
    default: null,
  },
});
const showPopupPic = (i) => {
  popupPic.value = i
  showPic.value = true
}
function handleClick() {

  if (props.detailItem.sUIType === 'extract') {
    const snote = props.detailItem.snote
    let targetbo = snote.substring(0, snote.indexOf('.'))
    let extract = snote.substring(snote.indexOf('=') + 1)
    console.log("targetbo", targetbo)
    console.log("extract", extract)

    const path = checkCustomized(`/${targetbo}`) ? targetbo : "/default";
    routerStore.mode = "reload";

    router.push({ path, query: { idobject: targetbo, extract: extract } })

  }

}
</script>

<style scoped>
.detailInput {
  border-bottom: 1px solid #fafafa;
}
</style>